<!--班车每日点名站点信息页-->
<template>
    <div style="height: 100%;">

        <m-page-list
                :option="option"
                :page="page"
                :total="total"
                :table-data="tableData"
                :table-loading="tableLoading"
                v-model:value="query"
                @h-btn-click="hBtnClick"
                @col-btn-click="colBtnClick"
                @search-data="searchData"
        />

        <m-dialog-form ref="dialogRef" :data="dialogData" v-model:show="dialogShow" :option="dialogOption" @confirm="dialogConfirm" ></m-dialog-form>
    </div>

</template>

<script setup>

  import {ref,reactive,onMounted,nextTick, defineProps,watch} from 'vue'
  //组件
  import MPageList from '@/components/PageList'
  import MDialogForm from '@/components/DialogForm/DialogForm'
  //请求
  import {getRollCallDailyShuttleStopData,editRollCallDailyShuttleStopData,addRollCallDailyShuttleStopData,delRollCallDailyShuttleStopData} from '@/request/api/basicData'

  // import {usePageList} from "../Shuttle/relPage";
  import {usePageList} from "../../composables/pageList";

  //引用类型字段参数
  import {refOpt} from "../const";

  const props = defineProps(['shuttleData']);

  let opts = {
    // auth_id: 'stop',
    getApi: getRollCallDailyShuttleStopData,
    addApi:addRollCallDailyShuttleStopData,
    editApi:editRollCallDailyShuttleStopData,
    delApi:delRollCallDailyShuttleStopData,
    idKey: 'row_id',
    stopMounted: true
  };
  let {option,page,total,tableLoading,tableData,query,dialogRef,dialogShow,dialogData,defDialogData,
    hBtnClick,colBtnClick,searchData,dialogOption,dialogConfirm,
    getDataList } = usePageList(opts);

  //  查询条件参数配置
  option.conditions = [
    {...refOpt.rollcall_shuttle_name,field_id: 'shuttle_id',entityKey: 'row_id', valueKey: [{'shuttle_id':'row_id'}] ,col: 12,rewriteInput: true, refCols: [
        {prop: 'row_id',label: '行号' },
  {prop: 'shuttle_no',label: '点名班车号' },
  {prop: 'shuttle_name',label: '点名班车名' },]},
  {...refOpt.stop_name,label: '点名站点名称',valueKey: [{'stop_no': 'stop_id'},'stop_name'],col: 12, rewriteInput: true},
  ];
  // 表格列显示参数配置
  option.cols = [
    {prop: 'shuttle_id', label: '点名班车号'},
    {prop: 'stop_no', label: '站点编号',},
    {prop: 'stop_name', label: '站点名称',},
    {prop: 'state', label: '点名状态',templte: scope =>{
        let {state} = scope.row;
        return state ? '已点名' : '未点名'
      }},
    {prop: 'path_type', label: '路径类型',},
    {prop: 'departure_time', label: '发车时间',},
    {prop: 'latitude', label: '纬度'},
    {prop: 'longitude', label: '经度'},
    {prop: 'modify_name', label: '修改员名',},
    {prop: 'modify_time', label: '修改时间',},
    {prop: 'input_name', label: '录入员名',},
    {prop: 'input_time', label: '录入时间',},
  ];

  option.colBtns[0] = {title: '编辑',id: 'edit',type: 'primary',event:(scope) => showDialog('edit','',scope)}

  option.hLBtns = [];
  option.hRBtns = [
    {title: '新增站点',id: 'stop',type: 'primary',event: () => showDialog('add','stop')},
    {title: '新增站点',id: 'school',type: 'primary',event: () => showDialog('add','school')}
  ]

  // 新增编辑弹窗录入项配置
  const fieldList = [
    {...refOpt.rollcall_shuttle_name,editDisabled: true,field_id: 'shuttle_id',entityKey: 'row_id',valueKey: [{ 'shuttle_id': 'row_id'}], label: '点名班车号',col: 2, required: true,
      refCols: [
        {prop: 'row_id',label: '行号' },
        {prop: 'shuttle_no',label: '点名班车号' },
        {prop: 'shuttle_name',label: '点名班车名' },
        {prop: 'direction',label: '方向' },
      ]},

    /*站点*/
    {...refOpt.stop_id,label: '点名站点编号',field_id: 'stop_no',col: 3,required: true},
    {...refOpt.stop_name,label: '点名站点名称',valueKey: [{'stop_no': 'stop_id'},'stop_name'],col: 3,required: true},

    /*站点*/
    {...refOpt.school_id,field_id: 'stop_no',required: true,col: 3},
    {...refOpt.school_name,field_id: 'stop_name',col: 3,required: true,
      valueKey: [{'stop_no':'school_id'},{'stop_name': 'school_name'}]},

    {field_id: 'departure_time', label: '发车时间',type: 'time',col: 3},
    {field_id: 'latitude', label: '纬度',type: 'text',col: 3},
    {field_id: 'longitude', label: '经度',type: 'text',col: 3},
  ];

  /**
   * 显示弹窗
   * @param type 弹窗类型：add新增、edit编辑
   * @param path 站点类型：school站点、stop普通站点
   * @param data 编辑数据：
   */
  function showDialog(type,path,data) {
    /*if ( (type === 'add' && !isAppend.value) || (type === 'edit' && !isEdit.value)){
      ElMessage({
        type: 'warning',
        message: `抱歉，您没有权限${type === 'add' ? '新增': '编辑'}该模块数据`
      })
      return
    }*/
    let list = fieldList,
      row = data && data.row,
      value = {};

    defDialogData.path_type = path === 'school' ? '站点' : '站点';
    if(row) path = row.path_type === '站点' ? 'school' : 'stop';

    if (type === 'edit')value.row_id = row.row_id;
    //设置弹窗标题
    let title = (type === 'add' ? '新增': '编辑') + (path === 'school' ? '站点': '站点');
    list = list.filter((item,index) => {
      if (item.editDisabled) item.disabled = type === 'edit';

      if (type === 'edit'){
        let val = row[item.show_field || item.field_id]
        val && (value[item.field_id] = val)
      }else {
        value = {...defDialogData};
      }

      if (path === 'school') {
        return ![1,2].includes(index);
      }else {
        return ![3,4].includes(index);
      }
    });
    dialogOption.title = title;
    dialogData.value = value;
    dialogShow.value = true;
    dialogOption.fieldList = list;
  }

  /*监听数据*/
  watch(() => props.shuttleData, (newVal) => {
    if (newVal){
      let {row_id,shuttle_id,shuttle_name,shuttle_seat_id} = newVal;
      // query.value = {...query.value, shuttle_id:row_id};
      defDialogData.shuttle_id = row_id;
      opts.baseQuery = {shuttle_id:row_id}
      getDataList();
    }
  },{immediate: true});

</script>

